<!--
 * @Description: 忘记密码
 * @Author 卞鹏飞 <228443632@qq.com>
 * @create 02/11/24 PM1:17
 -->
<script setup>
import RetrievePwd from './components/RetrievePwd.vue' // 找回密码组件
</script>

<template>
  <main class="page">
    <article class="page__banner hidden min-w-[576px] px-14 py-12 lg:block">
      <img
        src="@/assets/imgs/login/zslogo.svg"
        alt="浙商logo"
        class="h-[26px] w-[122px]"
      >
    </article>

    <article class="flex flex-1 flex-col items-center justify-center bg-white">
      <RetrievePwd />
    </article>
  </main>
</template>

<style scoped lang="less">
.page {
  inline-size: 100vw;
  block-size: 100vh;
  display: flex;
}

.page__banner {
  inline-size: 40%;
  background-image: url('@/assets/imgs/login/background.svg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

// ---------------------------设置输入框图标颜色-------------------------------
.ijep-form-item :deep(.ijep-input__prefix-inner) {
  transition: color 0.3s;
}

// 设置输入框图标颜色 选中状态颜色
.ijep-form-item:focus-within :deep(.ijep-input__prefix-inner) {
  color: var(--tzx-primary-color);
}

// 设置输入框图标颜色 错误状态颜色
.ijep-form-item.is-error :deep(.ijep-input__prefix-inner) {
  color: var(--tzx-error-color);
}

// --------------------autocomplete------------------------------------
:deep(.ijep-input__wrapper):has(:-webkit-autofill) {
  // 自动填充背景色
  background-color: var(--tzx-primary-color-50);
}
</style>
